<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="utf-8" />
<title>button</title>
<link rel="stylesheet" type="text/css"
	href="../themes/default/agileui.css">
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js "></script>
<!-- <script type="text/javascript" src="../jquery-1.7.2.min.js"></script> -->
<script type="text/javascript" src="../plugins/agileui.button.js"></script>
<script>
	$(function() {
		$('#comm-btn').button({
			toggle : 'button',
			onActive : function(e) {
				console.info("[" + $(e.target).html() + "]被点击...");
			}
		});
		$('#toggle-btn').button({
			toggle : 'toggle',
			theme : 'primary',
			onActive : function(e) {
				console.info("[" + $(e.target).html() + "]被激活...");
			},
			onDisActive : function(e) {
				console.info("[" + $(e.target).html() + "]取消激活...");
			}
		});
		$('#load-btn').button({
			toggle : 'loading',
			theme : 'success',
			loadingMessage : '请稍后...',
			onActive : function(e) {
				console.info("[" + $(e.target).html() + "]被激活...");
			}
		});
		$('#checkbox-btn').button({
			toggle : 'checkbox',
			theme : 'warning',
			items : [ {
				'text' : '选项一',
				'value' : '0',
				'active' : true
			}, {
				'text' : '选项二',
				'value' : '1',
				'active' : true
			}, {
				'text' : '选项三',
				'value' : '2'
			} ],
			onActive : function(e) {
				console.info("[" + $(e.target).html() + "]被激活...");
			},
			onDisActive : function(e) {
				console.info("[" + $(e.target).html() + "]取消激活...");
			}
		});
		$('#radio-btn').button({
			toggle : 'radio',
			theme : 'danger',
			items : [ {
				'text' : '男',
				'value' : '0',
				'active' : true
			}, {
				'text' : '女',
				'value' : '1'
			} ],
			onActive : function(e) {
				console.info("[" + $(e.target).html() + "]被激活...");
			}
		});
	});
</script>
</head>
<body>
	<table style="border: solid 1px; width: 500px;" border="1">
		<tr>
			<td>普通按钮</td>
			<td><input type="button" id="comm-btn" value="普通按钮" /></td>
		</tr>
		<tr>
			<td>切换按钮</td>
			<td><input type="button" id="toggle-btn" value="切换按钮" /></td>
		</tr>
		<tr>
			<td>加载按钮</td>
			<td><input type="button" id="load-btn" value="加载按钮" /></td>
		</tr>
		<tr>
			<td>单鞋按钮</td>
			<td><div id="radio-btn"></div></td>
		</tr>
		<tr>
			<td>复选按钮</td>
			<td><div id="checkbox-btn"></div></td>
		</tr>
	</table>
</body>
</html>